<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      body,
      html,
      #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
      }

      .panel {
        position: fixed;
        z-index: 1000;
        width: 260px;
        border-radius: 4px;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
        padding: 10px 20px;
        background-color: #ffffff;
      }

      .panelList {
        margin-bottom: 6px;
      }

      .panelList ul {
        display: none;
        padding: 0;
        margin: 10px 0 20px；
        transition: all 0.4s;
      }

      .panelList ul li {
        list-style: none;
        /* padding: 0 0 4px; */
        font-size: 12px;
      }

      .panelTitle {
        position: relative;
        /* margin-bottom: 10px; */
        vertical-align: middle;
      }

      .panelTitle span {
        display: inline-block;
        width: 120px;
      }

      .panelTitle .rightArrow {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
        cursor: pointer;
        width: 28px;
        height: 28px;
        background: url(images/rightArrow.png) no-repeat center;
        background-size: 100%;
      }

      .panelTitle a {
        display: inline-block;
        padding: 2px 8px;
        background: #449DE1;
        color: #FFFFFF;
        font-size: 12px;
        border-radius: 4px;
        cursor: pointer;
      }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./js/TrackAnimation.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=u3Y99hhCNVFBkxrGpWMGX9CFnkn4GZAD">
    </script>
    <title>视角动画</title>
  </head>
  <body>
    <div class="panel" id="panel"></div>
    <div id="allmap"></div>
  </body>
</html>
<script type="text/javascript">
  $('.panel').on('click', '.rightArrow', function() {
    if ($(this).parent().next().is(":hidden")) {
      $(this).parent().next().show();
    } else {
      $(this).parent().next().hide();
    }
  })
  // GL版命名空间为BMapGL
  // 按住鼠标右键，修改倾斜角和角度
  var bmap = new BMapGL.Map("allmap"); // 创建Map实例
  //bmap.centerAndZoom(new BMapGL.Point(124.880043, 45.076611), 16); // 初始化地图,设置中心点坐标和地图级别
  bmap.centerAndZoom(new BMapGL.Point(123.44047, 43.53700), 18); // 初始化地图,设置中心点坐标和地图级别

  bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

  var newPath = []; // 新传入的坐标
  var path = []; // 所有坐标
  var ws = new WebSocket("ws://222.168.10.44:8100/websocket/message");
  var carList = '';
  console.log(ws)
  ws.onopen = function(evt) {
    console.log("Connection open ...");
  };
  ws.onmessage = function(evt) {
    console.log("Received Message: " + evt.data);
    newPath = [];
    if (evt.data.length > 10) {
      let json = JSON.parse(evt.data);
      // console.log(json)
      if (json.id == 'list') {
        // console.log(JSON.parse(json.address))
        if (carList != json.address) {
          carList = json.address;
          let str = '';
          JSON.parse(carList).forEach(el => {
            str = str + `<div class="panelList">
							<div class="panelTitle">
                <span>${el.trailerCardId}</span>
								<a onclick="send(${el.loginId},'true')">获取</a>
								<a onclick="send(${el.loginId},'false')">停止</a>
								<i class="rightArrow"></i>
							</div>
							<ul>
								<li>司机：${el.driveName}</li>
								<li>联系方式：${el.phone}</li>
								<li>运输货物：${el.freight}</li>
							</ul>
						</div>`
          })
          $('.panel').html(str)
        }
      } else {
        let address = json.address;
        if (path[path.length - 1]) {
          newPath.push(path[path.length - 1]);
        } else {
          markerPoint({
            "lng": address[0],
            "lat": address[1]
          }, './images/startPoint.png', {
            width: 32,
            height: 32
          })
        }
        newPath.push({
          "lng": address[0],
          "lat": address[1]
        });
        path.push({
          "lng": address[0],
          "lat": address[1]
        });
        console.log(newPath)
        drawMap(newPath, 10000)
      }
    } else if (evt.data != 'false') {
      send('', '');
    }
  };
  ws.onclose = function(evt) {
    console.log("Connection closed.");
  };
  // 轨迹运动
  function drawMap(path, dutation) {
    var point = [];
    for (var i = 0; i < path.length; i++) {
      if(i==0) {
        point.push(new BMapGL.Point(path[i].lng, path[i].lat));
      }
      if(i>0 && path[i].lng != path[i-1].lng && path[i].lat != path[i-1].lat) {
        point.push(new BMapGL.Point(path[i].lng, path[i].lat));
      }
    }
    var polyline = new BMapGL.Polyline(point, {strokeColor:"green", strokeWeight:2, strokeOpacity:0.5});
    bmap.addOverlay(polyline);
  }
  // 添加标注点
  function markerPoint(point, imgPath, size) {
    let myIcon = new BMapGL.Icon(imgPath, new BMapGL.Size(size.width, size.height));
    let carPoint = new BMapGL.Point(point.lng, point.lat);
    let marker = new BMapGL.Marker(carPoint, {
      icon: myIcon,
    });
    bmap.addOverlay(marker);
    // 终点信息框
    if (imgPath.includes('3D')) {
      let sContent = `<b style="font-size:20px;padding-left:10px;">吉A123456</b>
				<div style="font-size:16px;padding-left:10px;">司机：杨师傅</div>
				<div style="font-size:16px;padding-left:10px;">联系方式：15844489653</div>
				<div style="font-size:16px;padding-left:10px;">运输货物：大米</div>
				<div style="font-size:16px;padding-left:10px;">最后登录时间：2022-03-26 14:42</div>`;
      let opts = {
        width: 270, // 信息窗口宽度
        height: 150, // 信息窗口高度
      }
      let infoWindow = new BMapGL.InfoWindow(sContent, opts);
      // marker添加点击事件
      marker.openInfoWindow(infoWindow);
      // marker.addEventListener('click', function() {
      // this.openInfoWindow(infoWindow);
      // 图片加载完毕重绘infoWindow
      // 	document.getElementById('imgDemo').onload = function() {
      // 		infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
      // 	};
      // });

    }
  }

  function send(id, address) {
    console.log('send')
    if (address == 'true') {
      bmap.clearOverlays();
    }
    let sendData = {
      loginId: '-1',
      id: id,
      address: address
    };
    ws.send(JSON.stringify(sendData));
  }
</script>
